import React, { Component } from 'react';
import { Modal, message, Row, Card, Tree } from 'antd';

const { TreeNode } = Tree;
export default class QueryHwInfo extends Component {
  state = {
    devIdArray: this.props.selectedRows,
  };

  onCheck = checkedKeys => {
    //console.log('selectkeys', checkedKeys);
    this.setState({ devIdArray: checkedKeys });
  };
  handleSet = () => {
    const { dispatch } = this.props;
    const devIds = this.state.devIdArray.join(',');
    dispatch({
      type: 'dev/queryHwInfo',
      payload: { devIds },
      callback: () => {
        message.success('查询设备硬件信息成功.');
      },
    });
    this.props.handleModalVisible(false, 'init');
  };

  render() {
    const { modalVisible, handleModalVisible, selectedRows } = this.props;
    return (
      <Modal
        title="查询硬件设备信息"
        visible={modalVisible}
        onOk={this.handleSet}
        onCancel={() => handleModalVisible(false, 'init')}
      >
        <Row style={{ width: '100%' }}>
          <Card title="设备列表（多选）" bodyStyle={{ height: 600, overflow: 'scroll' }}>
            {selectedRows.length ? (
              <Tree
                checkable
                style={{ height: 600 }}
                defaultCheckedKeys={selectedRows}
                onCheck={this.onCheck}
              >
                {selectedRows.map(data => (
                  <TreeNode title={data} key={data} />
                ))}
              </Tree>
            ) : (
              'loading tree'
            )}
          </Card>
        </Row>
      </Modal>
    );
  }
}
